<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="OLTP" name="first"></el-tab-pane>
    <el-tab-pane label="接口" name="second"></el-tab-pane>
    <el-tab-pane label="OLAP" name="third"></el-tab-pane>
    <el-tab-pane label="数仓/数据湖" name="fourth"></el-tab-pane>
    <el-tab-pane label="其他" name="five"></el-tab-pane>
  </el-tabs>

  <div class="flex flex-wrap gap-4">
    <div style="width: 100%; font-weight: bold">OLTP</div>
    <el-card style="width: 280px" @click="onSelect('1')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/mysql-Cdi4cWjA.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> MySql </template>
    </el-card>
    <el-card style="width: 280px" @click="onSelect('2')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/oracle-D7Oqhhgw.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> Oracle </template>
    </el-card>
    <el-card style="width: 280px" @click="onSelect('3')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/dm-BSpRwheE.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> 达梦 </template>
    </el-card>

    <div style="width: 100%; font-weight: bold">接口</div>
    <el-card style="width: 280px" @click="onSelect('1')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/mysql-Cdi4cWjA.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> RestAPI </template>
    </el-card>
    <el-card style="width: 280px" @click="onSelect('1')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/mysql-Cdi4cWjA.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> SOAP API </template>
    </el-card>

    <el-card style="width: 280px" @click="onSelect('1')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/mysql-Cdi4cWjA.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> WebSocket </template>
    </el-card>

    <div style="width: 100%; font-weight: bold">OLAP</div>
    <el-card style="width: 280px" @click="onSelect('1')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/mysql-Cdi4cWjA.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> MySql </template>
    </el-card>
    <el-card style="width: 280px" @click="onSelect('2')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/oracle-D7Oqhhgw.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> Oracle </template>
    </el-card>
    <el-card style="width: 280px" @click="onSelect('3')">
      <div style="height: 100px; width: 100%">
        <img src="http://bi.bctools.cn/jvs-chrat-report-ui/static/dm-BSpRwheE.jpg" style="width: 100%; object-fit: cover; height: 100px" />
      </div>
      <template #footer> 达梦 </template>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineOptions({
  name: 'DatasourceSelectDialog',
});

const radioValue = ref<string>('');
const activeName = ref<string>('');
const onSelect = (value: string) => {
  radioValue.value = value;
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.gap-4 {
  gap: 0.5rem;
}
.card {
  width: 210px;
  height: 110px;
}
.el-card {
  --el-card-padding: 10px;
}
.el-card:hover {
  background-color: antiquewhite;
  cursor: pointer;
}
</style>
